﻿<%@ Page Language="C#" MasterPageFile="~/Views/Layout/Master.master"
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="HeadContent" ContentPlaceHolderID="Head" runat="server">
    <link
        href="/Assets/Styles/pages/register.css"
        type="text/css"
        rel="stylesheet"
    />
    <script
        src="/Assets/Scripts/async-validator.js"
        type="text/javascript"
    ></script>
</asp:Content>
<asp:Content ID="ContentContent" ContentPlaceHolderID="Content" runat="server">
    <div id="app" v-cloak>
        <form onsubmit="return false">
            <div class="form">
                <div class="form-row">
                    <label class="form-row-label">Username:</label>
                    <div class="form-control">
                        <input
                            placeholder="please enter your username here"
                            autocomplete="off"
                            type="text"
                            v-model="user.username.val"
                        />
                        <span class="error-msg" v-if="user.username.errorMsg">{{
                            user.username.errorMsg
                        }}</span>
                    </div>
                </div>
                <div class="form-row">
                    <label class="form-row-label">Password:</label>
                    <div class="form-control">
                        <input
                            placeholder="please enter your password here"
                            autocomplete="off"
                            type="password"
                            v-model="user.password.val"
                        />
                        <span class="error-msg" v-if="user.password.errorMsg">{{
                            user.password.errorMsg
                        }}</span>
                    </div>
                </div>
                <div class="form-row">
                    <label class="form-row-label">Confirm Password:</label>
                    <div class="form-control">
                        <input
                            placeholder="please confirm your password here"
                            autocomplete="off"
                            type="password"
                            v-model="user.confirmPassword.val"
                        />
                        <span
                            class="error-msg"
                            v-if="user.confirmPassword.errorMsg"
                            >{{ user.confirmPassword.errorMsg }}</span
                        >
                    </div>
                </div>
                <div class="form-row">
                    <label class="form-row-label">Name:</label>
                    <div class="form-control">
                        <input
                            placeholder="please enter your name here"
                            type="text"
                            autocomplete="off"
                            v-model="user.name.val"
                        />
                        <span class="error-msg" v-if="user.name.errorMsg">{{
                            user.name.errorMsg
                        }}</span>
                    </div>
                </div>
                <div class="form-row">
                    <label class="form-row-label">Email:</label>
                    <div class="form-control">
                        <input
                            placeholder="please enter your email here"
                            type="text"
                            autocomplete="off"
                            v-model="user.email.val"
                        />
                        <span class="error-msg" v-if="user.email.errorMsg">{{
                            user.email.errorMsg
                        }}</span>
                    </div>
                </div>
                <div class="form-row">
                    <span class="form-row-label">Gender:</span>
                    <div class="form-control">
                        <div class="half-row">
                            Male:
                            <input
                                value="1"
                                class="form-control-radio"
                                type="radio"
                                v-model="user.gender.val"
                            />
                        </div>
                        <div class="half-row">
                            Female:
                            <input
                                value="0"
                                class="form-control-radio"
                                type="radio"
                                name="gender"
                                v-model="user.gender.val"
                            />
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <label class="form-row-label" for="">Mobile No:</label>
                    <div class="form-control">
                        <input
                            type="text"
                            placeholder="please enter your mobile phone number here"
                        />
                        <span class="error-msg" v-if="user.phone.errorMsg">{{
                            user.phone.errorMsg
                        }}</span>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-control text-center">
                        <button v-on:click="submit" class="btn-submit">
                            Submit
                        </button>
                        <button class="btn-reset" type="reset">
                            Reset
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: function () {
                return {
                    user: {
                        username: {
                            val: "",
                            errorMsg: "",
                        },
                        password: {
                            val: "",
                            errorMsg: "",
                        },
                        confirmPassword: {
                            val: "",
                            errorMsg: "",
                        },
                        name: {
                            val: "",
                            errorMsg: "",
                        },
                        email: {
                            val: "",
                            errorMsg: "",
                        },
                        gender: {
                            val: 0,
                        },
                        phone: { val: "", errorMsg: "" },
                    },
                };
            },
            methods: {
                submit() {},
                demo() {
                    this.user.gender.val = "1";
                },
            },
        });
    </script>
</asp:Content>
